import React, { useRef, useState } from "react";
import styles from "../index.less"
import { Avatar, Tooltip, List, Tag, Image } from 'antd';

interface IChat {
    chatlist: any[];
    id: string;
    fid: string;
}

const url = "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/Videonumber/";
const ChatBox: React.FC<IChat> = ({
    chatlist,
    id,
    fid,
}): React.ReactElement => {
    return (
        <div className={styles.chat_box}>
            {
                chatlist && chatlist.map((item, i) => (
                    <div className={styles.chat_list} key={item.nid} >

                        {
                            item.id === fid ? (
                                <div className={styles.chat_item}>
                                    <div className={styles.chat_pic}>
                                        <Avatar size={40} src={item.pic} />
                                    </div>
                                    <div className={styles.msg_box}>
                                        <p>
                                            {
                                                item.id === id ? <Tag color="#2db7f5">我：</Tag> : <Tag color="lime">{item.name}：</Tag>
                                            }
                                        </p>
                                        {

                                            item.textType === '图片' ? <Image
                                                width={140}
                                                src={url + item.content}
                                            />
                                                :
                                                <p className={styles.chat_msg}>{item.content}</p>
                                        }

                                    </div>
                                </div>
                            ) : null
                        }


                        {
                            item.receive_id === fid ? (

                                <div className={styles.chat_right}>
                                    <div className={styles.right}>
                                        <div>
                                            {

                                                item.textType === '图片' ? <Image
                                                    width={140}
                                                    src={url + item.content}
                                                />
                                                    :
                                                    <p>{item.content}:</p>
                                            }

                                        </div>
                                        <div className={styles.chat_pic}>
                                            <Avatar size={40} src={item.pic} />
                                        </div>
                                    </div>

                                </div>
                            ) : null
                        }


                    </div>

                ))

            }

        </div>
    )
}
export default ChatBox;